<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始css样式</title>

    <!-- 基础选择器 复合选择器 类选择器  #id选择器   *通配符选择器-->
    <!-- 选择器 {声明：样式} -->

    <!-- font-size font-weight（bold normal） font-family font-style  的使用顺序  为大小，粗细，字体，倾斜 -->
   <style>
        p {
            color: #003cff;
            font-size: 30px;   /*字体大小*/
            text-align: center; /*对齐方式*/
            font-style: italic;  /*斜体*/
            text-decoration: underline;  /*下划线*/
            text-indent: 2em;   /*缩进2个字符间隔*/
            line-height: normal; /*行高*/
          

            font-weight: 700; 
            font-family: "楷体";
        }

        .test {
         color:hotpink;
         text-align: center;
         text-decoration: underline;
         text-indent: 2em;
         line-height: 2em;

        }
        .red {
            width: 100px;
            height: 100px;
            font-weight: bold;
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            background-color: green;

        }

        #pink {
            color: pink;
        }
        .qing {
            font-style: normal;
        }
        .san {
            font-size: 16px;
            font-style:italic;
            font-weight:bold;
            font-family: "Microsoft yahei";
        }
    </style>

   <link rel="stylesheet"  href="./style.css">
</head>
<body>
    <p>显示样式</p>


   

    <em class="qing">倾斜的样式显示的信息</em>
    <ul>
        <li class="">测试1</li>
        <li>测试2</li>
        <li>测试3</li>
    </ul>

<div class="red">红色</div>
<div class="green"></div>
<div  class="red">红色</div>

<div class="san">三生三世十里桃花，一心一意搞事情。</div>
<div class="test">测试文本的显示的样式的大小，行高，字体颜色，首行缩进，文本的修饰</div>
<p style="color: mediumblue; text-align: left; text-decoration: underline; text-indent: 2em;">测试行内样式的修改方法</p>


<div class="out">
外部css样式的显示效果<br/>

   <p2> 书山有路勤为径，学海无涯苦作舟。吃的苦中苦方为人上人，在踏实的现实中活着，创造着能够完成这段艰巨的任务的使命。</p2>


</body>
</html>